<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 学习 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/21.6d37b375.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="active sidebar-link">CSS 学习</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/#css-学习路线" class="sidebar-link">CSS 学习路线</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_1-day01-能力目标" class="sidebar-link">1. day01 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_2-day02-能力目标" class="sidebar-link">2. day02 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_3-day013-能力目标" class="sidebar-link">3. day013 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_4-day014-能力目标" class="sidebar-link">4. day014 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_5-day05-能力目标" class="sidebar-link">5. day05 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_6-day06-能力目标" class="sidebar-link">6 day06 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_7-day07-能力目标" class="sidebar-link">7. day07 能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/#_8-day08-能力目标" class="sidebar-link">8. day08 能力目标</a></li></ul></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-学习"><a href="#css-学习" class="header-anchor">#</a> CSS 学习</h1> <h2 id="css-学习路线"><a href="#css-学习路线" class="header-anchor">#</a> CSS 学习路线</h2> <table><thead><tr><th>知识点</th> <th>作用</th> <th>阶段</th></tr></thead> <tbody><tr><td>选择器</td> <td>能够找到要改谁</td> <td>基础班</td></tr> <tr><td>样式</td> <td>能够修改目标外观</td> <td>基础班</td></tr> <tr><td>布局</td> <td>能够摆放盒子</td> <td>基础班</td></tr> <tr><td>动画</td> <td>能够让盒子动起来</td> <td>就业班</td></tr> <tr><td>移动端</td> <td>能够在不同宽度的屏幕都正常显示</td> <td>就业班</td></tr> <tr><td>响应式</td> <td>能够随着屏幕宽度变化自动调整</td> <td>就业班</td></tr> <tr><td>预处理</td> <td>让 CSS 也具备一定编程能力</td> <td>项目阶段</td></tr></tbody></table> <h2 id="_1-day01-能力目标"><a href="#_1-day01-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day01.html">1. day01 能力目标</a></h2> <ol><li>能够使用<strong>基础选择器</strong>选中自己希望修改的元素，修改样式之前必须先要能够找到它；</li> <li>能够使用<strong>字体和文本样式</strong>修改外观，包括：字体、字号、颜色等；</li> <li>能够知道 CSS 的<strong>引用方式</strong>及区别；</li> <li>能够知道 Chrome 调试工具的基本使用，后续会反复练习提高 CSS 调试技能。</li></ol> <h2 id="_2-day02-能力目标"><a href="#_2-day02-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day02.html">2. day02 能力目标</a></h2> <ol><li>能够使用 <strong>emmet</strong> 语法提高编码速度；</li> <li>能顾使用<strong>复合选择器</strong>在 HTML 中定位元素；</li> <li>能够理解元素的<strong>几种显示模式</strong>，并通过代码在不同显示模式间转换；</li> <li>能够精准控制背景图片的显示和位置。</li></ol> <h2 id="_3-day013-能力目标"><a href="#_3-day013-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day03.html">3. day013 能力目标</a></h2> <ol><li>掌握 CSS <strong>三大特性</strong>，遇到 CSS 冲突问题能够分析并动手解决；</li> <li>掌握<strong>盒子模型</strong>的<strong>边框</strong>、<strong>内间距</strong>、<strong>外边距</strong>的作用及设置方法；</li> <li>能够说出<strong>外边距合并</strong>问题的现象及解决办法（面试题）。</li></ol> <h2 id="_4-day014-能力目标"><a href="#_4-day014-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day04.html">4. day014 能力目标</a></h2> <ol><li>能够给盒子设置<strong>圆角边框</strong>和阴影，知道怎么给文字添加阴影；</li> <li>能够说出<strong>浮动的应用场景</strong>和<strong>布局套路</strong>，并应用浮动<strong>完成常见网页布局</strong>案例；</li> <li>能够说出<strong>清除浮动</strong>的原因，并知道 <strong>4 种清除浮动</strong>的方法，并<strong>至少记忆一种</strong>伪元素清除浮动的方法。</li></ol> <h2 id="_5-day05-能力目标"><a href="#_5-day05-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day05.html">5. day05 能力目标</a></h2> <ol><li>能够用专业的方式搭建项目结构，包括：<strong>项目结构搭建</strong>和<strong>基础公共样式</strong>；</li> <li>能够应用已经学习的知识完成<strong>学成在线</strong>案例；</li> <li>能够认识到养成<strong>良好的 CSS 书写顺序</strong>既专业又能提高浏览器的渲染性能。</li></ol> <h2 id="_6-day06-能力目标"><a href="#_6-day06-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day06.html">6 day06 能力目标</a></h2> <ol><li>能够说出<strong>四种定位的应用场景</strong>；</li> <li>能够使用<strong>子绝父相</strong>，实现<strong>学成在线热门课程的图片</strong>显示；</li> <li>能够使用<strong>子绝父相</strong>，实现<strong>淘宝轮播图</strong>（焦点图）案例；</li> <li>能够说出 3 种<strong>显示隐藏</strong>方式之间的区别，并实现<strong>土豆</strong>案例。s</li></ol> <h2 id="_7-day07-能力目标"><a href="#_7-day07-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day07.html">7. day07 能力目标</a></h2> <ol><li>能够使用精灵图并理解精灵图的原理；</li> <li>能够掌握字体图标的使用步骤；</li> <li>能够写出 CSS 三角形并理解原理；</li> <li>能顾利用 <code>vertical-align</code> 解决图片间隙问题；</li> <li>能够完成 <code>margin</code> / 行内块 / 京东三角形案例；</li> <li>能够理解为什么需要 CSS 初始化，并理解京东的 CSS 初始化都做了哪些设置。</li></ol> <h2 id="_8-day08-能力目标"><a href="#_8-day08-能力目标" class="header-anchor">#</a> <a href="/basenode/css/day08.html">8. day08 能力目标</a></h2> <ol><li>能够说出 3~5 个 HTML5 新增布局和表单标签；</li> <li>能够说出 C3 的新增特性。</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/basenode/css/day01.html">
        CSS 第 01 天 —— 基础选择器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/21.6d37b375.js" defer></script>
  </body>
</html>
